<div class="data-info">
  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>{{databaseName}}数据库信息展示</span>
      <span flex></span>
      <md-button aria-label="关闭" ui-sref="sas.resourcesWatchData.dbInfo"><i class="glyphicon glyphicon-remove"></i></md-button>
    </h2>
  </md-toolbar>
  <md-content>
    <div>
      <form class="form-horizontal" role="form" name="dbResUsageForm" novalidate>
        <div class="form-ctrl md-whiteframe-z1">
          <div class="form-search" style="height:160px;" ng-class="{true: 'shou'}[!toggle.isFolded]" ng-switch="dbResUsage.timeType.timeTypeCode">
            <div>
              <label style="">时间粒度</label>
              <md-select ng-model="dbResUsage.timeType">
                <md-select-label>{{dbResUsage.timeType ? _getNames(dbResUsage.timeType,'timeTypeName',selector.timeType) : "日"}}</md-select-label>
                <md-option ng-value="timeType" ng-repeat="timeType in selector.timeType" >{{timeType.timeTypeName}}</md-option>
              </md-select>
            </div>
            <input-quarter-group start-time="dbResUsage.quarter.startTime" end-time="dbResUsage.quarter.endTime" ng-switch-when="4"></input-quarter-group>
            <div ng-if="!dbResUsage.timeType || dbResUsage.timeType.timeTypeCode !== '4'">
              <md-input-container flex>
                <label >开始时间</label>
                <input name="dateStartTime" type="date" end-time="date.endTime" time-validate="day" ng-model="date.startTime"  ng-switch-default required>
                <div ng-messages="dbResUsageForm.dateStartTime.$error">
                  <div ng-message="date">请正确输入时间</div>
                  <div ng-message="time-error">开始时间不应大于结束时间</div>
                  <div ng-message="time-diff">开始时间最多小于结束时间3天</div>
                </div>
                <input name="monthStartTime" ng-model="date.startTime"  end-time="date.endTime" time-validate="month"  type="month" ng-switch-when="3" required>
                <div ng-messages="dbResUsageForm.monthStartTime.$error">
                  <div ng-message="date">请正确输入时间</div>
                  <div ng-message="time-error">开始时间不应大于结束时间</div>
                  <div ng-message="time-diff">开始时间最多小于结束时间3个月</div>
                </div>
              </md-input-container >
            </div>
            <div ng-if="!dbResUsage.timeType || dbResUsage.timeType.timeTypeCode !== '4'">
              <md-input-container flex>
                <label>结束时间</label>
                <input name="dateEndTime" type="date" ng-model="date.endTime"  start-time="date.startTime" time-validate="day" ng-switch-default required>
                <div ng-messages="dbResUsageForm.dateEndTime.$error">
                  <div ng-message="date">请正确输入时间</div>
                  <div ng-message="time-error">结束时间不应小于开始时间</div>
                  <div ng-message="too-great">结束时间不应大于当前时间</div>
                  <div ng-message="time-diff">结束时间最多高于开始时间3天</div>
                </div>
                <input name="monthEndTime" ng-model="date.endTime"  type="month" start-time="date.startTime" time-validate="month" ng-switch-when="3" required>
                <div ng-messages="dbResUsageForm.monthEndTime.$error">
                  <div ng-message="date">请正确输入时间</div>
                  <div ng-message="time-error">结束时间不应小于开始时间</div>
                  <div ng-message="too-great">结束时间不应大于当前时间</div>
                  <div ng-message="time-diff">结束时间最多高于开始时间3个月</div>
                </div>
              </md-input-container >
            </div>
          </div>
          <i class="glyphicon glyphicon-chevron-up shrinkage"ng-show="isQuery" ng-click="toggle.isFolded=false"></i>
          <md-button ng-click="dbResUsageQuery()" class="md-fab md-primary md-hue-1" aria-label="Profile" ng-disabled="dbResUsageForm.$invalid && toggle.isFolded">
            <i class="glyphicon glyphicon-search"  ng-show="toggle.isFolded"></i>
            <i class="glyphicon glyphicon-arrow-down" style="margin-top:28px;" ng-show="!toggle.isFolded"></i>
          </md-button>
        </div>
      </form>
      <div class="table-info">
        <div>
          <div class="menus" style="height:50px">
          </div>
          <div style="height:398px;width:100%;" ng-show="!isQuery"></div>
          <div ng-repeat="item in series track by $index" id="{{'dbResUsageChart'+$index}}" style="height:398px;width:960px;margin:0 auto;" ng-show="isQuery"></div>
        </div>
      </div>
    </div>
  </md-content>
</div>